<template>
  <view class="background">
    <view class="first-container" >
      <view class="top-container">
        <img class="img" src="/static/xiaohui.png" alt="">
        <view class="college">桂林电子科技大学</view>
      </view>

      <view class="bottom-container">
        <view class="info-wrapper">
          <view class="photo-container">
            <img src="/static/xiaohui.png" alt="" style="width: 100%; height: 100%;">
          </view>
          <view class="details-container" >
            <view>姓名：{{ cardData.name}}</view>
            <view>性别：{{ cardData.sex}}</view>
            <view v-if="cardData.identity === 0">学号：{{ cardData.studentId}}</view>
            <view v-if="cardData.identity === 1">工号：{{ cardData.workId}}</view>
            <view>学院：{{ cardData.college}}</view>
          </view>
        </view>
      </view>
      </view>

    <view style="display: flex;margin-top: 60rpx;">
      <button class="button" @click="tradeDetail">余额查询</button>
      <button class="button" @click="loss">挂失</button>
    </view>
  </view>
</template>

<script>
import student from '@/api/student/index.js'
import store from '@/store';
import {LossRecordForm} from "../../api/student/type";
export default {
    data() {
      return {
        cardData:{
          name: "",
          sex: "",
          studentId: 0,
          college: "",
          identity: '',
          workId: ''
        },
        tradeDetailData:[{
          reduceSource: "",
          reduceAmount: "",
          reduceDate: "",
        }],

      }
    },
    onLoad() {
      this.cardInfo()
    },
    methods: {
      //校园卡信息
      async cardInfo() {
        try {
          const res = await student.getCampusCardInfo();
          this.cardData = res.data
        } catch (error) {
          console.error(error);
        }
      },
      //跳转交易记录
      async tradeDetail() {
        uni.navigateTo({
          url: '/pages/card/balance', // 跳转的目标页面路径
          success: function () {
          },
          fail: function (err) {
          }
        });
      },

      //跳转挂失
      async loss() {
        uni.navigateTo({
          url: '/pages/card/loss', // 跳转的目标页面路径
          success: function () {
          },
          fail: function (err) {
          }
        });
      }
  }
}
</script>

<style >
.background {
  height: 100vh; /* 使背景占满整个视口高度 */
  width: 100%;
  background: white;
  flex-direction: column; /* 使子元素垂直排列 */
  display: flex;

}

.first-container{
  width: 95%;
  height: 40%;
  margin-top:20px;
  border: 1px solid #ccc;
  margin-left: 10px;

}

.top-container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: flex-start; /* 水平对齐到左侧 */
  background-color: #589fed;
}

.img {
  width: 100upx; /* 根据需要调整图片宽度 */
  height: 100upx; /* 根据需要调整图片高度 */
  margin-right: 10upx; /* 为图片和文字之间添加间距 */
  background-color: white;
}

.college {
  font-size: 36upx; /* 根据需要调整字体大小 */
  color: white; /* 根据需要调整文字颜色 */
  font-weight: bold;
  padding-left: 30upx;
}

.bottom-container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  padding: 20upx; /* 调整内边距 */
}

.info-wrapper {
  display: flex;
  align-items: flex-start; /* 使内容垂直对齐到顶部 */
  width: 100%; /* 占据父容器的全部宽度 */
}

.photo-container {
  width: 90px;
  height: 120px;
  margin-right: 20upx; /* 为照片和文字之间添加间距 */
}

.details-container {
  padding-left: 10px;
  height: 120px;
  flex: 1; /* 使详细信息容器占据剩余空间 */
  font-size: 18px;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 使内容在垂直方向上均匀分布 */
}

.button {
  border: 0;
  background-color: #409EFF;
  color: white;
  width: 180rpx;
  font-size: 14px;
}
</style>